<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	 <meta charset="UTF-8">
	 <title th:replace="common/base::pagetitle"></title>
	 <link th:replace="common/base::static"/>
</head>
<body>
<div class="layui-form" style="padding: 20px 30px 0 0;">
	 <div class="layui-form-item">
	 <label class="layui-form-label">模板名称</label>
	 <div class="layui-input-block">
		  <input type="text" name="name" th:value="${editInfo.name}" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
	 </div>
	 </div>
	 <div class="layui-form-item">
		  <label class="layui-form-label">模板描述</label>
		  <div class="layui-input-block">
				<input type="text" name="description" th:value="${editInfo.description}" lay-verify="required" placeholder="请输入描述" autocomplete="off" class="layui-input">
		  </div>
	 </div>
	 <table class="layui-hide" id="tableId" lay-filter="tableEvent"></table>
	 <div class="layui-form-item layui-hide">
		  <input type="button" lay-submit="" lay-filter="kFormSubmit" id="kFormSubmit" value="确认添加">
		  <input type="text" name="id" id="id" th:value="${editInfo.id}" placeholder="保存ID" autocomplete="off" class="layui-input">
		  <!--        <input type="text" name="deptId" th:value="${editInfo.deptId}" placeholder="保存deptId" autocomplete="off" class="layui-input">-->
	 </div>
</div>

<script th:replace="common/base::context"></script>
<script th:replace="common/base::mainjs"></script>
<script th:src="@{/static/js/select-tree.js}"></script>

<script type="text/html" id="toolbarDemo">
	 <div class="layui-btn-container">
		  <button type="button" lay-event="tableTreeEdit" id="btn1" class="layui-btn  layui-btn-sm">添加最上级节点</button>
		  <button type="button" lay-event="tableTreeEdit" id="btn2" class="layui-btn  layui-btn-sm">获取勾选数据</button>
		  <button type="button" lay-event="tableTreeEdit" id="btn3" class="layui-btn  layui-btn-sm">获取全部数据</button>
		  <button type="button" lay-event="tableTreeEdit" id="btn4" class="layui-btn  layui-btn-sm">关闭勾选节点</button>
		  <button type="button" lay-event="tableTreeEdit" id="btn5" class="layui-btn  layui-btn-sm">展开勾选节点</button>
		  <button type="button" lay-event="tableTreeEdit" id="btn6" class="layui-btn  layui-btn-sm">关闭所有叶子节点</button>
		  <button type="button" lay-event="tableTreeEdit" id="btn7" class="layui-btn  layui-btn-sm">展开所有叶子节点</button>
		  <!--<button type="button" lay-event="tableTreeEdit" id="btn8" class="layui-btn  layui-btn-sm">获取表格树配置</button>-->
		  <button type="button" lay-event="tableTreeEdit" id="btn9" class="layui-btn  layui-btn-sm">重载表格树</button>
		  <button type="button" lay-event="tableTreeEdit" id="btn10" class="layui-btn  layui-btn-sm">删除勾选节点</button>
		  </br>
		  <button type="button" lay-event="tableTreeEdit" id="btn11" class="layui-btn  layui-btn-sm">重置搜索</button>
		  <button type="button" lay-event="tableTreeEdit" id="btn12" class="layui-btn  layui-btn-sm">刷新</button>
		  <!--<button type="button" lay-event="tableTreeEdit" id="btn13" class="layui-btn  layui-btn-sm">排序</button>-->
	 </div>
</script>

<script>
    layui.use(['form','table','tableEdit','tableTree'], function () {
        var $ = layui.$, form = layui.form, table = layui.table
				, tableEdit = layui.tableEdit, tableTree = layui.tableTree;
        
        var treeTable = treeTable = tableTree.render({
            elem: '#tableId'
            ,id:'tableTree'
            //,url:'/static/plugins/tableTree/json/data.json'
            ,url: BASE_WEB + 'schema/info/getSchema?id=' + $('#id').val()
				,page: false
            //,height: 'full-90'
            ,size:'sm'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,page: true
            ,treeConfig:{ //表格树所需配置
                showField:'field' //表格树显示的字段
                ,treeid:'id' //treeid所对应字段的值在表格数据中必须是唯一的，且不能为空。
                ,treepid:'pid'//父级id字段名称
                ,iconClass:'layui-icon-right' //小图标class样式 窗口图标 layui-icon-layer
                ,showToolbar: true //展示工具栏 false不展示 true展示
            }
            ,cols: [
                [
                {type:'checkbox'}
					 ,{field:'field',title: '字段',event:'field',config:{type:'input'},width:200,sort:true}
					  ,{field:'description',title:'描述',event:'description',config:{type:'input'},width:120}
					  ,{field:'required',title:'是否必填',width:120}
					  ,{field:'type',title:'数据类型',event:'type',config:{type:'select',data:[{name:'整数',value:'integer'},{name:'字符串',value:'string'},{name:'对象',value:'object'}]},width:120}
					  ,{field:'min',title:'最小值',event:'min',config:{type:'signedInput'},width:100}
					  ,{field:'max',title:'最大值',event:'max',config:{type:'signedInput'},width:100}
					  ,{field:'enum',title:'枚举值',event:'enum',config:{type:'input'},width:100}
            	]
				],done:function () {
                treeTable.closeAllTreeNodes();
                treeTable.openTreeNode(1)
            }
        });

        /**
         *表格的增删改都会回调此方法
         * 与table.on(tool(lay-filter))用法一致。
         **/
        tableTree.on('tool(tableEvent)',function (obj) {
            var field = obj.field; //单元格字段
            var value = obj.value; //修改后的值
            var data = obj.data; //当前行数据
            var event = obj.event; //当前单元格事件属性值
            //event为del为删除 add则新增 edit则修改 async则为异步请求数据。
            //这个三个值固定死了，切莫定义与之三个重复的event。
            if(event !== 'del' && event !== 'add' && event !== 'type' && event !== 'async'){
                var update = {};
                update[field] = value;
                obj.update(update);
                console.log(obj)
            }
            if(event === 'type'){
                obj.update({type:value.value});
            }
            if(event === 'del'){
                obj.del();
            }
            if(event === 'add'){ //点击操作栏加号图标时触发
                //异步、同步都可以使用
                //obj.add(arr)生成表格树,arr参数为数组，数组中元素的treeid字段值重复则被过滤掉
                obj.add([]) //参数不传或为空数组时 => 新增空行
            }
            if(event === 'async'){ //点击方向箭头小图标时触发
                //可ajax异步请求后台数据,回调obj.async(arr)生成表格树,arr参数为数组
                //数组中元素的treeid字段值重复则被过滤掉
                obj.async([{"id":'abc',"treeName":'abc',"permissionId ":'abc',"sort":'3333',createDate:'2020-02-02',type:'1'}]);
            }
            if(event === 'id'){
                $(this).parents('tr').attr('tree-id',value);
            }
        });

        /**
         *监听复选框选中状态
         **/
        tableTree.on('checkbox(tableEvent)', function(obj){
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
            console.log(obj.data);
        });
        var isAsc = true;
        table.on('toolbar(tableEvent)', function(obj){
            var id = $(this).attr("id");
            if(id==="btn1"){
                //data可以为空，为空则创建空行，否则按照data数据生成行
                treeTable.addTopTreeNode();//新增最上级节点
            }else if(id === 'btn2') {
                console.log(treeTable.getCheckedTreeNodeData()) //获取选中行的树状数据
            }else if(id === 'btn3') {
                console.log(treeTable.getTableTreeData())//获取表格树所有数据
            }else if(id === 'btn4') {
                var tr = treeTable.getCheckedTreeNodeData();//选中行
                $(tr).each(function(i,o){
                    treeTable.closeTreeNode(o.id);  // 根据tr或者树id关闭相对应树节点
                })
            }else if(id === 'btn5') {
                var tr = treeTable.getCheckedTreeNodeData();//选中行
                $(tr).each(function(i,o){
                    treeTable.openTreeNode(o.id);  // 根据tr或者树id展开相对应树节点
                })
            }else if(id === 'btn6') {
                treeTable.closeAllTreeNodes();  //关闭所有树节点
            }else if(id === 'btn7') {
                treeTable.openAllTreeNodes(); //展开所有树节点
            }else if(id === 'btn8') {
                console.log(treeTable.getTreeOptions()); //获取表格配置
            }else if(id === 'btn9'){
                treeTable.reload(); //表格树进行reload
            }else if(id === 'btn10') {
                var tr = treeTable.getCheckedTreeNodeData();//选中行
					 $(tr).each(function(i,o){
                    treeTable.delTreeNode(o.id); //根据tr元素或者节点id删除节点及相关叶子节点
					 })
            
            }else if(id === 'btn11') {
                treeTable.clearSearch(); //重置搜索
            }else if(id === 'btn12') {
                //传了数据进去进行刷新，那么会把原来的数据给删除了，
                //然后把传进去的数据进行更新进去
                treeTable.refresh();
            }else if(id === "btn13"){
                treeTable.sortByTreeNode(28,'sort',isAsc); //指定节点或节点id排序
                isAsc = !isAsc;
            }
        });

        /**
         * 整个表格树排序，与layui进行了整合。
         */
        table.on('sort(tableEvent)', function(obj){
            treeTable.sort({field:obj.field,desc:obj.type === 'desc'})
        });

        $('#aassss').on('change',function () {
            treeTable.keywordSearch(this.value); //关键词搜索树
        });

        //监听提交
        form.on('submit(kFormSubmit)', function (data) {
            var field = data.field; //获取提交的字段
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            /*if (deptId) {
                field.deptId = deptId;
            }*/
            //所有数据
            field.data = JSON.stringify(treeTable.getTableTreeData());
            log('field=', field);

            //提交 Ajax 成功后，关闭当前弹层并重载表格
            $.ajax({
                type: req.type.post,
                url:  BASE_WEB + 'schema/info/edit',
                data: field,
                async: false,
                success: function (r) {
                    if (r.code === req.status.ok) {
                        parent.layui.table.reload('kContentTable'); //重载表格
                        parent.layer.close(index); //再执行关闭
                    } else {
                        wlbKit.errorMsg(r.msg);
                    }
                }
            });

        });
    })
</script>
</body>
</html>